<template>
	<view class="container">
		<u-navbar  title="举报查询" placeholder="true" titleStyle="color:white;font-weight:bold" :bgColor="background">
			<view class="slot-wrap" slot="left">
				<u-icon name="home"  color="white" size="40" @click="returnHome"></u-icon>
			</view>
		</u-navbar>
		<view class="reportUser">
			<view class="titleContainer">
				<text class="title">实名举报查询</text>
			</view>
			<view class="userForm">
				<u--form
					:model="form" 
					ref="uForm"
					:rules="rules"
					labelWidth="78px"
				>
				<u-form-item
					label="手机号码" 
					borderBottom
					prop="phone"
					required
				>
					<u-input v-model="form.phone" placeholder="请输入手机号码" customStyle="width:1000px"   border="none" @change="changeTel"></u-input>
				</u-form-item>
				<u-form-item
					label="验证码"
					borderBottom
					prop="code"
					required
				>
					<u-input v-model="form.code" placeholder="请输入验证码"  border="none">
						<template slot="suffix">
							<u-code
								ref="uCode"
								@change="codeChange"
								seconds="60"
								changeText="60秒重新获取"
							>
							</u-code>
							<u-button
								@click="getCode"
								:text="tips"
								type="success"
								size="mini"
								:disabled="this.disabled"
							>
							</u-button>
						</template>
					</u-input>
				</u-form-item>
				</u--form>
				<u-button type="primary" size="large" text="实名举报查询" @click="submit"></u-button>
				<u-button type="info" style="background-color: lightgrey;margin-top: 0.5em;" size="large" text="点击匿名举报查询" @click="select"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled:true,
				background:'#24A7FE',
				tips: '',	
				form:{
					code:'',
					key:'',
					phone:'',
					reportNumber:'',
					vType:1
				},
				rules:{
					phone:[
						{
							required: true,
							message: '请输入手机号码',
							trigger: 'blur'
						},
						{							required: true,							pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,							message: '请输入正确的手机号码',							trigger: ['blur', 'change']
						}
					],
					code:[
						{
							required: true,
							message: '请输入手机验证码',
							trigger:'blur'
						}
					]
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			returnHome(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			codeChange(text) {
			    this.tips = text;
			},
			changeTel(){
			    const res =this.$refs.uForm.validateField('phone',(error) => {
					console.log(error);
					if(error.length===0){
						console.log('校验成功');
						this.disabled = false
					}else{
						console.log('校验失败');
						this.disabled = true
					}
				})
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
				   const res =  this.$api.verificatonCode.mobileVerificationCodeSelect(this.form.phone) 
				   console.log(res)
				   // 模拟向后端请求验证码
				   uni.showLoading({
						title: '正在获取验证码'
				   })
				   setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
				   }, 2000);
				} else {
				  uni.$u.toast('倒计时结束后再发送');
				}
		  },
		  submit(){
			  this.$refs.uForm.validate().then(res=>{
				  this.$api.select.selectOrder(this.form).then(res=>{
					  console.log(res);
					  //实名举报的逻辑
					  if(res.data.success===true){
						  let arrList = res.data.data
						  let item = JSON.stringify(arrList)
						  uni.setStorageSync('reportInfoReal',item)
						  uni.navigateTo({
						  	url:'/pages/selectRealReportList/selectRealReportList'
						  })
					  }
					  
					  
					  
				  })
			  })
		  },
		  select(){
			  uni.navigateTo({
			  	url:'/pages/selectAnonymous/selectAnonymous'
			  })
		  }
		}
	}
</script>

<style scoped lang="scss">
.container{
	*{
		margin-bottom: 10rpx;
	}
		.slot-wrap{
			display: flex;
			align-items: center;
			margin-bottom: 0;
			      }
		.reportUser{
			.titleContainer{
				border-bottom: 1px solid lightgrey;
				padding-bottom: 7px;
				margin: 7px 18px;
				.title{
					font-weight: bold;
					width: 96px;
					height: 33px;
					color: rgba(16, 16, 16, 1);
					font-size: 24px;
					text-align: left;
					font-family: PingFangSC-regular;
				}
			}
			.userForm{
				margin: 7px 18px;
			}
		}
		
	}
</style>
